<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>待办事项 - 属性和样式绑定</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
      }

      #app {
        transition: all 0.3s ease;
        min-height: 100vh;
      }

      /* 主题样式 */
      #app.light-theme {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #333;
      }

      #app.dark-theme {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        color: #ecf0f1;
      }

      #app.colorful-theme {
        background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
        color: #fff;
      }

      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        min-height: 100vh;
      }

      .header {
        text-align: center;
        margin-bottom: 30px;
      }

      .title {
        font-size: 2.5rem;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }

      .subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
      }

      /* 主题切换器 */
      .theme-switcher {
        position: fixed;
        top: 20px;
        right: 20px;
        display: flex;
        gap: 10px;
      }

      .theme-btn {
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      }

      .theme-btn:hover {
        transform: scale(1.1);
      }

      .theme-btn.active {
        transform: scale(1.2);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      }

      .light-btn {
        background: linear-gradient(45deg, #667eea, #764ba2);
      }
      .dark-btn {
        background: linear-gradient(45deg, #2c3e50, #34495e);
      }
      .colorful-btn {
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      }

      /* 输入区域 */
      .input-section {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 25px;
        margin-bottom: 30px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      }

      .task-input {
        width: 100%;
        padding: 15px 20px;
        border: none;
        border-radius: 25px;
        font-size: 16px;
        background: rgba(255, 255, 255, 0.9);
        color: #333;
        margin-bottom: 15px;
        transition: all 0.3s ease;
      }

      .task-input:focus {
        outline: none;
        transform: scale(1.02);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
      }

      .priority-section {
        display: flex;
        gap: 15px;
        align-items: center;
        margin-bottom: 15px;
      }

      .priority-option {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 8px 15px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.2);
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .priority-option:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .priority-option.selected {
        background: rgba(255, 255, 255, 0.4);
        transform: scale(1.05);
      }

      .add-btn {
        width: 100%;
        padding: 15px;
        border: none;
        border-radius: 25px;
        font-size: 16px;
        font-weight: bold;
        background: linear-gradient(45deg, #ff6b6b, #ee5a24);
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .add-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      }

      .add-btn:active {
        transform: translateY(0);
      }

      /* 统计区域 */
      .stats-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        margin-bottom: 30px;
      }

      .stat-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 20px;
        text-align: center;
        transition: all 0.3s ease;
      }

      .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }

      .stat-number {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .stat-label {
        opacity: 0.8;
        font-size: 0.9rem;
      }

      /* 筛选区域 */
      .filter-section {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 30px;
      }

      .filter-group {
        margin-bottom: 15px;
      }

      .filter-label {
        display: block;
        margin-bottom: 10px;
        font-weight: bold;
      }

      .filter-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      .filter-btn {
        padding: 8px 16px;
        border: none;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.2);
        color: inherit;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 14px;
      }

      .filter-btn:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .filter-btn.active {
        background: rgba(255, 255, 255, 0.5);
        transform: scale(1.05);
      }

      /* 任务列表 */
      .task-list {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 25px;
      }

      .task-item {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 15px;
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
      }

      .task-item:hover {
        transform: translateX(5px);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      }

      .task-item.completed {
        opacity: 0.6;
        transform: scale(0.98);
      }

      .task-item.completed .task-text {
        text-decoration: line-through;
      }

      .task-item.priority-high {
        border-left-color: #e74c3c;
        background: linear-gradient(90deg, rgba(231, 76, 60, 0.1), rgba(255, 255, 255, 0.1));
      }

      .task-item.priority-medium {
        border-left-color: #f39c12;
        background: linear-gradient(90deg, rgba(243, 156, 18, 0.1), rgba(255, 255, 255, 0.1));
      }

      .task-item.priority-low {
        border-left-color: #27ae60;
        background: linear-gradient(90deg, rgba(39, 174, 96, 0.1), rgba(255, 255, 255, 0.1));
      }

      .task-checkbox {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid currentColor;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
      }

      .task-checkbox.checked {
        background: currentColor;
      }

      .task-checkbox.checked::after {
        content: '✓';
        color: white;
        font-size: 12px;
        font-weight: bold;
      }

      .task-content {
        flex: 1;
        cursor: pointer;
      }

      .task-text {
        font-size: 16px;
        margin-bottom: 5px;
      }

      .task-meta {
        font-size: 12px;
        opacity: 0.7;
      }

      .task-actions {
        display: flex;
        gap: 10px;
      }

      .action-btn {
        padding: 8px 12px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.3s ease;
      }

      .action-btn:hover {
        transform: scale(1.1);
      }

      .toggle-btn {
        background: #3498db;
        color: white;
      }

      .delete-btn {
        background: #e74c3c;
        color: white;
      }

      .empty-state {
        text-align: center;
        padding: 60px 20px;
        opacity: 0.7;
      }

      .empty-icon {
        font-size: 4rem;
        margin-bottom: 20px;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .container {
          padding: 10px;
        }

        .title {
          font-size: 2rem;
        }

        .theme-switcher {
          position: static;
          justify-content: center;
          margin-bottom: 20px;
        }

        .stats-section {
          grid-template-columns: repeat(2, 1fr);
        }

        .filter-buttons {
          justify-content: center;
        }

        .task-item {
          flex-direction: column;
          align-items: stretch;
          text-align: center;
        }

        .task-actions {
          justify-content: center;
        }
      }
    </style>
  </head>
  <body>
    <div id="app" :class="themeClass">
      <div class="container">
        <!-- 主题切换器 -->
        <div class="theme-switcher">
          <button
            class="theme-btn light-btn"
            :class="{active: currentTheme === 'light'}"
            @click="setTheme('light')"
            title="明亮主题"
          ></button>
          <button
            class="theme-btn dark-btn"
            :class="{active: currentTheme === 'dark'}"
            @click="setTheme('dark')"
            title="暗黑主题"
          ></button>
          <button
            class="theme-btn colorful-btn"
            :class="{active: currentTheme === 'colorful'}"
            @click="setTheme('colorful')"
            title="彩色主题"
          ></button>
        </div>

        <!-- 标题区域 -->
        <div class="header">
          <h1 class="title">{{title}}</h1>
          <div class="subtitle" v-html="intro"></div>
        </div>

        <!-- 输入区域 -->
        <div class="input-section">
          <input
            type="text"
            class="task-input"
            v-model="newTask"
            @keyup.enter="addTask"
            :placeholder="inputPlaceholder"
            :style="inputStyle"
          />

          <div class="priority-section">
            <span>优先级：</span>
            <label
              v-for="option in priorityOptions"
              :key="option.value"
              class="priority-option"
              :class="{selected: priority === option.value}"
              :style="{borderColor: option.color}"
            >
              <input type="radio" :value="option.value" v-model="priority" style="display: none" />
              <span :style="{color: option.color}">{{option.icon}}</span>
              <span>{{option.label}}</span>
            </label>
          </div>

          <button class="add-btn" @click="addTask" :disabled="!newTask.trim()">
            {{addButtonText}}
          </button>
        </div>

        <!-- 统计区域 -->
        <div class="stats-section">
          <div class="stat-card" :style="statCardStyle('total')">
            <div class="stat-number">{{tasks.length}}</div>
            <div class="stat-label">总任务</div>
          </div>
          <div class="stat-card" :style="statCardStyle('completed')">
            <div class="stat-number">{{completedCount}}</div>
            <div class="stat-label">已完成</div>
          </div>
          <div class="stat-card" :style="statCardStyle('pending')">
            <div class="stat-number">{{pendingCount}}</div>
            <div class="stat-label">未完成</div>
          </div>
          <div class="stat-card" :style="statCardStyle('rate')">
            <div class="stat-number">{{completionRate}}%</div>
            <div class="stat-label">完成率</div>
          </div>
        </div>

        <!-- 筛选区域 -->
        <div class="filter-section">
          <div class="filter-group">
            <span class="filter-label">状态筛选</span>
            <div class="filter-buttons">
              <button
                v-for="filter in statusFilters"
                :key="filter.value"
                class="filter-btn"
                :class="{active: currentFilter === filter.value}"
                @click="currentFilter = filter.value"
              >
                {{filter.label}} ({{getFilterCount(filter.value)}})
              </button>
            </div>
          </div>

          <div class="filter-group">
            <span class="filter-label">优先级筛选</span>
            <div class="filter-buttons">
              <button
                v-for="filter in priorityFilters"
                :key="filter.value"
                class="filter-btn"
                :class="{active: priorityFilter === filter.value}"
                @click="priorityFilter = filter.value"
              >
                {{filter.label}}
              </button>
            </div>
          </div>
        </div>

        <!-- 任务列表 -->
        <div class="task-list">
          <h3 style="margin-bottom: 20px">任务列表</h3>

          <!-- 空状态 -->
          <div v-if="filteredTasks.length === 0" class="empty-state">
            <div class="empty-icon">{{emptyStateIcon}}</div>
            <div>{{emptyStateText}}</div>
          </div>

          <!-- 任务项 -->
          <div v-else>
            <div
              v-for="task in filteredTasks"
              :key="task.id"
              class="task-item"
              :class="taskItemClass(task)"
              :style="taskItemStyle(task)"
            >
              <div
                class="task-checkbox"
                :class="{checked: task.completed}"
                @click="toggleTask(task.id)"
              ></div>

              <div class="task-content" @click="toggleTask(task.id)">
                <div class="task-text">{{task.text}}</div>
                <div class="task-meta">
                  {{getPriorityLabel(task.priority)}} • {{task.createdAt}}
                </div>
              </div>

              <div class="task-actions">
                <button class="action-btn toggle-btn" @click="toggleTask(task.id)">
                  {{task.completed ? '恢复' : '完成'}}
                </button>
                <button class="action-btn delete-btn" @click="removeTask(task.id)">删除</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      const { createApp, ref, computed, watch } = Vue
      const App = {
        setup() {
          // 基础数据
          const title = ref('✨ 智能待办事项')
          const intro = ref('<p>🎯 高效管理，精彩生活！</p>')
          const newTask = ref('')
          const priority = ref('一般')
          const tasks = ref([])
          const currentFilter = ref('all')
          const priorityFilter = ref('all')
          const currentTheme = ref('light')

          // 配置数据
          const priorityOptions = [
            { value: '重要', label: '重要', icon: '🔥', color: '#e74c3c' },
            { value: '一般', label: '一般', icon: '⭐', color: '#f39c12' },
            { value: '低', label: '低', icon: '🌱', color: '#27ae60' }
          ]

          const statusFilters = [
            { value: 'all', label: '全部' },
            { value: 'pending', label: '未完成' },
            { value: 'completed', label: '已完成' }
          ]

          const priorityFilters = [
            { value: 'all', label: '全部优先级' },
            { value: '重要', label: '🔥 重要' },
            { value: '一般', label: '⭐ 一般' },
            { value: '低', label: '🌱 低' }
          ]

          let nextId = 1

          // 主题类名（响应式变量）
          const themeClass = ref(`${currentTheme.value}-theme`)
          
          // 监听主题变化
          watch(currentTheme, (newTheme) => {
            themeClass.value = `${newTheme}-theme`
          })

          const completedCount = computed(() => {
            return tasks.value.filter(task => task.completed).length
          })

          const pendingCount = computed(() => {
            return tasks.value.filter(task => !task.completed).length
          })

          const completionRate = computed(() => {
            if (tasks.value.length === 0) return 0
            return Math.round((completedCount.value / tasks.value.length) * 100)
          })

          const filteredTasks = computed(() => {
            let filtered = tasks.value

            // 状态筛选
            if (currentFilter.value === 'pending') {
              filtered = filtered.filter(task => !task.completed)
            } else if (currentFilter.value === 'completed') {
              filtered = filtered.filter(task => task.completed)
            }

            // 优先级筛选
            if (priorityFilter.value !== 'all') {
              filtered = filtered.filter(task => task.priority === priorityFilter.value)
            }

            return filtered
          })

          const inputPlaceholder = computed(() => {
            const placeholders = {
              light: '✨ 今天要完成什么呢？',
              dark: '🌙 夜深了，还有什么计划？',
              colorful: '🌈 让生活更精彩，添加新任务！'
            }
            return placeholders[currentTheme.value]
          })

          const addButtonText = computed(() => {
            return newTask.value.trim() ? `添加「${priority.value}」任务` : '请输入任务内容'
          })

          const emptyStateIcon = computed(() => {
            if (tasks.value.length === 0) return '🎯'
            return '📋'
          })

          const emptyStateText = computed(() => {
            if (tasks.value.length === 0) {
              return '还没有任务，开始添加第一个任务吧！'
            }
            return '当前筛选条件下没有任务'
          })

          const inputStyle = computed(() => {
            const styles = {
              light: { borderLeft: '4px solid #3498db' },
              dark: { borderLeft: '4px solid #e74c3c' },
              colorful: { borderLeft: '4px solid #ff6b6b' }
            }
            return styles[currentTheme.value]
          })

          // 方法
          const setTheme = theme => {
            currentTheme.value = theme
          }

          const addTask = () => {
            if (newTask.value.trim() === '') return

            tasks.value.push({
              id: nextId++,
              text: newTask.value.trim(),
              priority: priority.value,
              completed: false,
              createdAt: new Date().toLocaleString()
            })

            newTask.value = ''
          }

          const toggleTask = taskId => {
            const task = tasks.value.find(t => t.id === taskId)
            if (task) {
              task.completed = !task.completed
            }
          }

          const removeTask = taskId => {
            if (confirm('确定要删除这个任务吗？')) {
              const index = tasks.value.findIndex(t => t.id === taskId)
              if (index > -1) {
                tasks.value.splice(index, 1)
              }
            }
          }

          const getFilterCount = filterValue => {
            if (filterValue === 'all') return tasks.value.length
            if (filterValue === 'pending') return pendingCount.value
            if (filterValue === 'completed') return completedCount.value
            return 0
          }

          const getPriorityLabel = priorityValue => {
            const option = priorityOptions.find(opt => opt.value === priorityValue)
            return option ? `${option.icon} ${option.label}` : priorityValue
          }

          const taskItemClass = task => {
            return {
              completed: task.completed,
              'priority-high': task.priority === '重要',
              'priority-medium': task.priority === '一般',
              'priority-low': task.priority === '低'
            }
          }

          const taskItemStyle = task => {
            const baseStyle = {
              transition: 'all 0.3s ease'
            }

            if (task.completed) {
              return {
                ...baseStyle,
                opacity: 0.6,
                transform: 'scale(0.98)'
              }
            }

            return baseStyle
          }

          const statCardStyle = type => {
            const colors = {
              total: '#3498db',
              completed: '#27ae60',
              pending: '#f39c12',
              rate: '#e74c3c'
            }

            return {
              borderTop: `3px solid ${colors[type]}`
            }
          }

          // 初始化示例数据
          tasks.value = [
            {
              id: nextId++,
              text: '学习Vue属性绑定',
              priority: '重要',
              completed: false,
              createdAt: new Date().toLocaleString()
            },
            {
              id: nextId++,
              text: '完成课后作业',
              priority: '一般',
              completed: true,
              createdAt: new Date().toLocaleString()
            },
            {
              id: nextId++,
              text: '锻炼身体30分钟',
              priority: '低',
              completed: false,
              createdAt: new Date().toLocaleString()
            }
          ]

          return {
            title,
            intro,
            newTask,
            priority,
            tasks,
            currentFilter,
            priorityFilter,
            currentTheme,
            priorityOptions,
            statusFilters,
            priorityFilters,
            themeClass,
            completedCount,
            pendingCount,
            completionRate,
            filteredTasks,
            inputPlaceholder,
            addButtonText,
            emptyStateIcon,
            emptyStateText,
            inputStyle,
            setTheme,
            addTask,
            toggleTask,
            removeTask,
            getFilterCount,
            getPriorityLabel,
            taskItemClass,
            taskItemStyle,
            statCardStyle
          }
        }
      }

      const app = createApp(App)
      app.mount('#app')
    </script>
  </body>
</html>
